<template>
  <div v-move class="cut-off-rule">
    <div class="axis"></div>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';

  const props = defineProps({
    modelValue: Number,
    max: Number,
    min: Number,
  });

  const emit = defineEmits(['update:modelValue']);

  const value = computed({
    get() {
      return props.modelValue;
    },
    set(val) {
      emit('update:modelValue', val);
    },
  });

  const mouseMove = (event: MouseEvent) => {
    const result = (value.value || 300) + event.movementX;
    value.value = Math.min(
      Math.max(result, props.min || 100),
      props.max || 800
    );
  };

  const mouseDown = () => {
    document.onselectstart = () => false;
    document.addEventListener('mousemove', mouseMove);
  };
  const mouseUp = () => {
    document.onselectstart = () => true;
    document.removeEventListener('mousemove', mouseMove);
  };

  const vMove = {
    mounted(el: Element) {
      el.addEventListener('mousedown', mouseDown);
      document.addEventListener('mouseup', mouseUp);
    },
    beforeUnmount(el: Element) {
      el.removeEventListener('mousedown', mouseDown);
      document.removeEventListener('mouseup', mouseUp);
      document.removeEventListener('mousemove', mouseMove);
    },
  };
</script>

<style lang="less" scoped>
  .cut-off-rule {
    width: 11px;
    padding: 0 5px;
    cursor: col-resize;
    .axis {
      width: 1px;
      height: 100%;
      background-color: var(--color-border);
    }
  }
</style>
